<script setup>
import { inject } from 'vue';
/* import {ref} from "vue"

const count = ref(0)

const addCount = () => {
    count.value++
} */

// const {count,addCount} = inject("count")

// import { countStore } from "@/store/count"
// 引入store钩子
import { useCountStore } from '../store/countStore';
// 获取store实例
const countStore = useCountStore()


/* 
    状态管理
        -状态（state）
            -应用当中的数据就是状态
            -状态即数据
        -视图（view）
            -试图用来呈现，用户视图访问数据
        -交互（actions）
            -用户的操作
            -状态会根据用户在视图中的操作发生变化

    状态提升
        -当有多个组件需要用到同一个state时，可以将state提升到组件的共同祖先组件中
            声明这样一来所有这些组件便可以通过祖先元素来访问到这个state
*/
</script>


<template>
   <!--  <h3>
        componentA--
        {{ countStore.count }}--
        <button @click="countStore.addCount">点我一下</button>
    </h3> -->

    <h3>
        componentA--
        {{ countStore.count }} -- {{ countStore.double }}--
        {{ countStore.name }} --
        <button @click="countStore.addCount">点我一下</button>
    </h3>
</template>